<template>
	<CustomContainer pagePath="apply" title="申请" showBack="true">
		<view class="application-container">
			<view class="header">
				<text class="title">
					由于该应用为个人应用，仅限作者及指定人员使用，申请时需提供真实姓名及手机号，否则可能会导致申请不通过影响使用，或者使用提供的游客账号进行体验，谢谢配合。
				</text>
			</view>

			<view class="form-container">
				<view class="input-group">
					<text class="label">用户名</text>
					<input class="input" type="text" v-model="username" placeholder="请输入用户名" @blur="validateUsername" />
					<text v-if="usernameError" class="error-text">{{ usernameError }}</text>
				</view>

				<view class="input-group">
					<text class="label">手机号</text>
					<input class="input" type="number" v-model="phoneNumber" placeholder="请输入手机号" @blur="validatePhoneNumber" />
					<text v-if="phoneError" class="error-text">{{ phoneError }}</text>
				</view>

				<button class="submit-btn" @click="submitForm">确定</button>
			</view>
		</view>
	</CustomContainer>
</template>

<script>
import CustomContainer from '@/components/CustomContainer.vue';
export default {
	data() {
		return {
			username: '',
			phoneNumber: '',
			usernameError: '',
			phoneError: ''
		};
	},
	components: {
		CustomContainer
	},
	methods: {
		validateUsername() {
			if (!this.username.trim()) {
				this.usernameError = '用户名不能为空';
				return false;
			} else {
				this.usernameError = '';
				return true;
			}
		},

		validatePhoneNumber() {
			const phoneRegex = /^1[3-9]\d{9}$/;
			if (!this.phoneNumber.trim()) {
				this.phoneError = '手机号不能为空';
				return false;
			} else if (!phoneRegex.test(this.phoneNumber)) {
				this.phoneError = '手机号格式不正确';
				return false;
			} else {
				this.phoneError = '';
				return true;
			}
		},
		addApply() {
			uniCloud
				.callFunction({
					name: 'ApplyList',
					data: {
						action: 'setApplyList',
						params: {
							userName: this.username,
							telephoneNumber: this.phoneNumber,
							allow: false,
							userId: `${new Date().getTime()}`
						}
					}
				})
				.then(res => {
					uni.showToast({
						title: '申请成功',
						icon: 'success',
						position: 'top',
						mask: true
					});
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/home/home'
						});
					}, 1000);
				});
		},
		submitForm() {
			const isUsernameValid = this.validateUsername();
			const isPhoneValid = this.validatePhoneNumber();

			if (isUsernameValid && isPhoneValid) {
				uniCloud
					.callFunction({
						name: 'ApplyList',
						data: {
							action: 'findApplyList',
							params: {
								userName: this.username,
								telephoneNumber: this.phoneNumber
							}
						}
					})
					.then(res => {
						const { result } = res || {};
						if (result?.data?.length === 0) {
							this.addApply();
						} else {
							uni.showToast({
								title: '已申请请勿重复申请',
								position: 'top',
								mask: true,
								icon: 'none'
							});
						}
					});
			} else {
				// 验证失败，提示用户
				uni.showToast({
					title: '请检查输入信息',
					icon: 'none'
				});
			}
		}
	}
};
</script>

<style scoped>
.application-container {
	box-sizing: border-box;
	width: 100%;
	height: 100vh;
	padding: 50px 20px 0;
	overflow: hidden;
	background: #1c92d2;
	background: -webkit-linear-gradient(to top, #1c92d2, #f2fcfe);
	background: linear-gradient(to top, #1c92d2, #f2fcfe);
}

.header {
	margin-bottom: 30px;
	padding: 20px 8px;
	background-color: #fff;
	border-radius: 8px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.title {
	font-size: 14px;
	font-weight: bold;
	color: rgb(248, 164, 0);
}

.form-container {
	background-color: #fff;
	border-radius: 8px;
	padding: 20px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.input-group {
	margin-bottom: 20px;
}

.label {
	display: block;
	margin-bottom: 8px;
	font-size: 16px;
	color: #333;
	font-weight: 500;
}

.input {
	width: 100%;
	height: 45px;
	padding: 0 15px;
	border: 1px solid #ddd;
	border-radius: 4px;
	font-size: 16px;
	box-sizing: border-box;
}

.input:focus {
	border-color: #007aff;
}

.error-text {
	color: #ff3b30;
	font-size: 14px;
	margin-top: 5px;
	display: block;
}

.submit-btn {
	width: 100%;
	height: 45px;
	background-color: #007aff;
	color: #fff;
	border: none;
	border-radius: 4px;
	font-size: 18px;
	font-weight: bold;
	cursor: pointer;
	margin-top: 10px;
}

.submit-btn:active {
	background-color: #0062cc;
}
</style>
